<template>
  <div class="Loadbox">
    <div class="tit">
      <div class="litt" style="background-color: #6ec3b9;">
        <div>平均负荷 (kW)</div><div class="num">{{ entityval.allavgP?(+entityval.allavgP).toFixed(2):'' }}</div>
      </div>
      <div class="litt" style="background-color: #fd7f86;">
        <div>最大负荷 (kW)</div><div class="num">{{ entityval.allmaxP?(+entityval.allmaxP).toFixed(2):'' }}</div>
      </div>
      <div class="litt" style="background-color: #ffd45d;">
        <div>最小负荷 (kW)</div><div class="num">{{ entityval.allminP?(+entityval.allminP).toFixed(2):'' }}</div>
      </div>
      <div class="litt" style="background-color: #5cbdff;">
        <div>峰谷差率 (%)</div><div class="num">{{ entityval.allratePeakValley?(+entityval.allratePeakValley).toFixed(2):'' }}</div>
      </div>
      <div class="litt" style="background-color: #9b71ff;">
        <div>负载率 (%)</div><div class="num">{{ entityval.allrateP?(+entityval.allrateP).toFixed(2):'' }}</div>
      </div>
    </div>
    <div class="tabech">
       <div class="echarts" ref="loadrefs"></div>
       <div class="echarts">
          <TableColumn  :tableConfig="tableConfig"
           :tableData="tableData" ref="tablecolumn">
          </TableColumn>
       </div>
    </div>
    <div class="fenye">
        <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="pageNo"
            @current-change="getdatalist"
            :total="total"
            :page-size="10"
          >
          </el-pagination>
      </div>
  </div>
</template>
<script>
import {gethistoylistapi,gethistoyechartapi} from '@/api/system/HistoryList'
import TableColumn from '@/components/Table'
import {GetEcharts} from '@/utils/echarts'
export default {
  name: 'CallPoliceElectric',
  components:{TableColumn},
  props: {
    treeval: {
      type: Object,
      default:()=>{}
    },
    form: {
      type: Object,
      default:()=>{}
    },
  },
  data() {
    return {
      val: '',
      row: '',
      array: [],
      entityval:{},
      total:0,
      pageNo:0,
      tableData:[],
      tableConfig: [
      { label: '设备', prop: 'deviceName' },
      { label: '时间', prop: 'date' ,center:'center'},
      { label: '平均负荷(kW)', prop: 'avgP' ,center:'right'},
      { label: '最大负荷(kW)', prop: 'maxP' ,center:'right'},
      { label: '最小负荷(kW)', prop: 'minP' ,center:'right'},
      { label: '峰谷差率(%)', prop: 'ratePeakValley' ,center:'right'},
      { label: '负载率(%)', prop: 'rateP' ,center:'right'},
      ],
    };
  },

  mounted() {
    
    // this.getloadech()
  },

  methods: {
    async getdatalist() { 
      const dateString=this.row.radio3=='1'?this.row.value1:this.row.radio3=='2'?this.row.value2:this.row.value3
      const {data:{list,entity,totalCount}}=await gethistoyechartapi({ dateString, dateType: this.row.radio3, deviceId: this.val.id, tag: '2' ,pageNo:this.pageNo-1,pageSize:10})
      this.tableData = list ? list : []
      this.total=totalCount
      this.entityval=entity?entity:{}
    },
    async getchushi(val, row) {
      this.val = val
      this.row=row
      const dateString=row.radio3=='1'?row.value1:row.radio3=='2'?row.value2:row.value3
      const { data: { list } } = await gethistoylistapi({ dateString, dateType: row.radio3, deviceId: val.id, tag: '2' })
      this.getdatalist()
      this.array = list
      this.getloadech(list)
      
    },
    getloadech(list) {
      const timePoints = list.find((ele) => ele.datalist.length)?.datalist.map((item) => item.timeReading)
      const array = list.map((ele) => {
        return {
            name: ele.name,
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: ele.datalist.map((item) => item.valueReading),
        }
    })
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          right:'0'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '7%',
          containLabel: true
        },
        color:['#6ec3b9','#fd7f86','#ffd45d'],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: timePoints
        },
        yAxis: {
          type: 'value'
        },
        series: array
      };
      GetEcharts(this,this.$refs.loadrefs,option)
    }
  }
};
</script>
<style lang="scss" scoped>
.Loadbox{
  height: 100%;
  .tit{
    display: flex;
    justify-content: space-between;
    .litt{
      width: calc(20% - 20px);
      margin: 10px;
      height: 90px;
      border-radius: 10px;
      color: #fff;
      padding: 0 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .num{
        font-size: 20px;
        margin-top: 5px;
      }
    }
  }
  .tabech{
    height: calc(100% - 140px);
    padding: 10px;
    .echarts{
      height: 50%;
    }
  }
  .fenye{
    text-align: right;
  }
}
</style>